<template>
  <div class="boxs" style="margin-left: 13px;width: 96%">
    <div class="table">
      <div class="ttit ttit0">车间</div>
      <div class="ttit ttit3">人员</div>
      <div class="ttit ttit2">工序名称</div>
      <div class="ttit ttit3">分配数量</div>
      <div class="ttit ttit1">已完成数量</div>
    </div>
    <div class="tablebox" >
      <vue-seamless-scroll :data="statusDataList" class="seamless-warp" :class-option="defaultOption">
        <div class="table_cell" v-for="item in statusDataList">
          <div class="ttit ttit0" style="color:#FFFFFF;">{{item.deptName}}</div>
          <div class="ttit ttit2  cpoint" :data-id="item.deptId" :data-type="3" @click="showList()"  >{{item.wgy}}</div>
          <div class="ttit ttit2  cpoint" :data-id="item.deptId" :data-type="3" @click="showList()">{{item.town}}</div>
          <div class="ttit ttit3 cpoint" :data-id="item.deptId" :data-type="5" @click="showList()">{{item.hotline}}</div>
          <div class="ttit ttit1  cpoint"  :data-id="item.deptId" :data-type="1" @click="showList()">{{item.finish}}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import {getAction} from "@/api/manage";
import request from "@/utils/request";
import vueSeamlessScroll from 'vue-seamless-scroll'


export default {
  name: "EventDeptStatusList",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      statusDataList:[],
      defaultOption:{
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },

    }
  },
  mounted() {
    this.getStatusDeptCount();
  },
  created() {

  },
  methods: {
    getStatusDeptCount() {
      let that = this;
      let params = {
        deptId: "1",
        types : "acceptWgy,town,acceptTown,report,acceptHotLine,finish"
      };
      getAction('/statistic/event/getDeptStatusCount', params).then(response => {
        that.statusDataList = [];
        for(let i in response.rows){
          let obj = response.rows[i];
          let acceptWgy = obj["acceptWgy"];
          let town = obj["town"];
          let acceptTown = obj["acceptTown"];
          let report = obj["report"];
          let acceptHotLine = obj["acceptHotLine"];
          let finish = obj["finish"];

          that.statusDataList.push({
            deptId: obj["deptId"],
            deptName: obj["deptName"],
            wgy: acceptWgy,
            town: town + acceptTown,
            hotline: report + acceptHotLine,
            finish: finish
          });
        }
      });
    },

    showList(){
      this.$nextTick(() => {
        // this.$refs.eventListPage.getList();
      })
    }

  }
}
</script>
<style scoped lang="scss">

.tablebox{
  width: 100%;
  height: calc(100% - 0.40rem);
  // border: 1px solid red;
  //overflow-y: auto;
  position: relative;
}
.table{
  width: 100%;
  height: 0.25rem;
  font-size: 0.09rem;
  // border: 1px solid red
  display: flex;
  justify-content: space-around;
  /*background: rgba(115,191,233,0.2);*/
  font-size: 0.09rem;

  .ttit{
    /*width: 0.8rem;*/
    height: 0.25rem;
    line-height:  0.25rem;
    text-align: center;
    color: #2FFAFC;
    font-size: 0.08rem;
    width: 33.333333%;
    border: 0.1px solid #0d90ef;
    border-left: none;
  }
}

.table_cell{
  width: 100%;
  height: 0.25rem;
  font-size: 0.08rem;
  // border: 1px solid red
  display: flex;
  justify-content: space-around;
  font-size: 0.07rem;

  .ttit{
    /*width: 0.8rem;*/
    height: 0.25rem;
    line-height:  0.25rem;
    text-align: center;
    color: #ffff43;
    font-size: 0.09rem;
    width: 33.333333%;
    border: 0.1px solid #0d90ef;
    border-right: none;
    border-top: none;
  }
}
.boxs{
  width: 98%;
  text-align: center;
  height: calc(100% - 0.3rem);
  // border: 1px solid white;
}
.cpoint{
  cursor: pointer;
}
.seamless-warp{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
